<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h3>使用全局组件:这里需要注意 如果有大写需要使用-隔开 因为html大小写不区分的</h3>
    <my-top></my-top>
    <my-bottom></my-bottom>
</div>

</body>

<script>

    //全局组件:整个项目中都可以使用到
    //局部组件:只能当前页面中使用

    //目前我们vue.js中 html这种形式体会不到的....

    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {}
    })

    //定义全局组件:目前vue.js中没法写复杂的组件 等到脚手架可以写单独的组件xxx.vue
    app.component('myTop',{
        template:'<h1>页面头部</h1>' //template:就是vue中的template模板
    })

    app.component('myBottom',{
        template:'<h1>页面底部</h1>' //template:就是vue中的template模板
    })

    app.mount("#app")
</script>

</html>